<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>原生与jqAjax</title>
</head>
<body>

<button class="btn1">发送原生请求</button>
<button class="btn2">发送jqAjax请求</button>

<script src="jquery-1.9.1.min.js"></script>
<script>

//原生ajax请求--xmlhttprequest
	document.querySelector('.btn1').onclick = function(){
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(xhr.readyStatechange == 4){
				if(xhr.status == 200){
					console.log(JSON.parse(xhr.responseText));
				}
			}
		};

		var formData = new FormData();
		formData.append('uname','frank');
		formData.append('upass','123456');

		xhr.open('post','reivew.php',true);
		xhr.send(formData);
	};


document.querySelector('.btn2').onclick = function(){
	$.ajax({
		type:'post',
		url:'reivew.php',
		dataType:'json',
		data:{
			usename:'jq-frank',
			password:'jq-123456'
		},
		success:function(res){
			console.log(res);
		}
	});
};


	function frankAjax(paramsObj){



		if(paramsObj.type.toLowerCase() == 'get'){
			console.log('这是get请求');
		}else if(paramsObj.type.toLowerCase() == 'post'){
			console.log('这是post请求');
		}else{
			console.log('请求类型错误');
		}
	}

	frankAjax({
		type:'post',
		url:'reivew.php',
		dataType:'json',
		data:{
			usename:'jq-frank',
			password:'jq-123456'
		},
		success:function(res){
			console.log(res);
		}
	});


//构建自己的ajax框架
//约定1：参数模仿jq的格式，也是一个json
//		json中必要字段有：
//		type请求类型，url请求地址，data请求参数，success请求回调
	// function frankAjax(paramsObj){
		//（1）先处理paramsObj参数，把这个json格式的参数换成必要的格式
		//	a.如果是get请求，将参数拼接到url后面
		//	{...}->[...]->join()->url+join()
		//	先把json->数组->join方法拼接成字符串->url+join()
		//	b.如果是post请求，则构建formData参数对象
		//		formData.append(...,...);
		
		//（2）准备xhr对象，然后实现onreadystatechange,准备发送请求
		//		xhr.onreadystatechange = function(){...};

		//（3）准备open()
		//		xhr.open(..., ..., true);
		
		//（4）准备send()
				// if(paramsObj.type == 'get'){ xhr.send(null); }
				// else if(paramsObj.type == 'post'){ xhr.send(formData); }

		//（5）
		//
	// }


</script>

</body>
</html>